<template>
  <!-- 动态属性绑定的数组写法 -->
  <!-- todo-item为原来的样式，当todo.completed为真（1）
  就添加样式todo-completed，否则就不添加 -->
  <div :class="['todo-item', todo.completed ? 'todo-completed' : '']">
    <!-- 实现checkbox的双向绑定 -->
    <!-- 实现自定义v-model -->
    <!--v-model不可以 -->
    <!--注意:checked="todo.completed"是接收父组件向子组件传的值,
        :checked可以将todo.completed的值转为布尔类型  -->
    <input 
      type="checkbox" 
      :checked="todo.completed" 
      @change="handleChange" 
    />
    <input
      v-if="isEdit"
      type="text"
      v-model="todoItem.content"
      @keyup.enter="handleEdit"
      @blur="handleEdit"
    />
    <label 
      v-else 
      @click="isEdit = true"
    >
      {{ todo.content }}
    </label>
    <button @click="handleClick"></button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    todo: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isEdit: false,
      todoItem: this.todo,
    }
  },
  methods: {
    handleChange() {
      console.log('子组件的checkbox状态改变了...')
      // 触发自定义事件. 提交给父组件处理
      // 应用到的核心技术点: 子组件->父组件传值
      this.$emit('toggle', this.todo.id)
    },
    handleEdit() {
      this.isEdit = false
      this.$emit('edit', this.todoItem)
    },
    handleClick() {
      // 触发自定义事件'del'
      this.$emit('del', this.todo.id)
    },
  },
}
</script>

<style lang="stylus">
@import '~styles/theme.styl'
@import '~styles/mixins.styl'

.todo-item
  display: flex
  justify-content: space-between
  align-items: center
  padding: 10px
  border-top: 1px solid rgba(0, 0, 0, 0.1)
  font-size: 24px
  input
    clearDefault()
    &::after
      content: url('~images/unChecked.svg')
    &:checked::after
      content: url('~images/Checked.svg')
  label
    flex: 1
    padding-left: 10px
    transition: all 0.4s
  button
    width: 40px
    height: 40px
    background-color: transparent
    clearDefault()
    cursor: pointer
  &:hover
    button::after
      content: 'X'
      font-size: 24px
      color: $lightred
  //交集选择器
  &.todo-completed
    label
      text-decoration: line-through
      color: #999
</style>
